import React, { PureComponent, Fragment } from 'react';
import { SketchPicker } from "react-color";
import { Input } from "antd";

class Index extends PureComponent{
    constructor(props){
        super(props);
        this.state={
            data:this.props.data,
            background:"#000000",
            display:"none"
        }
    }
    render(){
        const { data } = this.state;
        return(
            <Fragment>
                <Input placeholder={data['placeholder']} value={this.state.background} readOnly onClick={this.onClick} autoFocus={data['autoFocus']?data['autoFocus']:false} disabled={data['disabled']?data['disabled']:false} size={data['size']} />
                <div style={{display:this.state.display,position:"relative"}}>
                    <div style={{position:"absolute",zIndex:1}}>
                        <SketchPicker
                            color={ this.state.background }
                            onChangeComplete={this.onChange}
                        />
                        <div style={{
                                position:"absolute",width:"20px",height:"20px",
                                borderRadius:"100px",border:"1px solid #999999",
                                color:"#000000",top:"-10px",right:"-10px",
                                lineHeight:"20px",fontSize:"14px",textAlign:"center",
                                backgroundColor:"#fff",cursor:"pointer"
                            }}
                            onClick={this.onClick2}
                        >
                            X
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
    onClick = (e)=>{
        this.setState({
            display:"block"
        })
    }
    onClick2 = (e)=>{
        this.setState({
            display:"none"
        })
    }
    onChange = (e)=>{
        const { setColor } = this.props;
        this.setState({
            background:e.hex
        })
        this.setState({
            display:"none"
        })
        setColor(e.hex);
    }
}

export default Index;